<template>
<div class="demo-container">
  <el-menu
    active-text-color="#ffff"
    background-color="#2d2f30"
    :collapse="isCollapse"
    :default-active="activeMenu"
    text-color="#fff"
    @select="handleSelect"
    class="demo-menu"
  >
    <el-icon :size="25" color="#fff" class="isCollapse">
      <Expand v-if="isCollapse === true" @click="handleMenu(false)"/>
      <Fold v-else @click="handleMenu(true)"/>
    </el-icon>

    <el-sub-menu index="1">
      <template #title>
        <el-icon><setting /></el-icon>
        <span>场景配置</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="1-1">自定义工具栏</el-menu-item>
        <el-menu-item index="1-2">cube和坐标轴设置</el-menu-item>
        <el-menu-item index="1-3">设置背景颜色</el-menu-item>
        <el-menu-item index="1-4">设置高亮颜色</el-menu-item>
        <el-menu-item index="1-5">设置鼠标操作方式</el-menu-item>
        <el-menu-item index="1-6">鹰眼地图</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>

    <el-sub-menu index="2">
      <template #title>
        <el-icon><icon-menu /></el-icon>
        <span>模型加载</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="2-1">模型加载</el-menu-item>
        <el-menu-item index="2-2">模型装配</el-menu-item>
        <el-menu-item index="2-3">模型切换</el-menu-item>
        <el-menu-item index="2-4">渲染参数</el-menu-item>
        <el-menu-item index="2-5">服务端渲染</el-menu-item>
        <el-menu-item index="2-6">LOD加载</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>
        <el-icon><CameraFilled /></el-icon>
        <span>相机视角</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="3-1">视图切换</el-menu-item>
        <el-menu-item index="3-2">模型视角</el-menu-item>
        <el-menu-item index="3-3">设置和获取视角</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>

    <el-sub-menu index="4">
      <template #title>
        <el-icon><Tools /></el-icon>
        <span>构件操作</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="4-1">构件高亮</el-menu-item>
        <el-menu-item index="4-2">隐藏构件</el-menu-item>
        <el-menu-item index="4-3">隔离构件</el-menu-item>
        <el-menu-item index="4-4">定位构件</el-menu-item>
        <el-menu-item index="4-5">构件透明度设置</el-menu-item>
        <el-menu-item index="4-6">构件属性</el-menu-item>
        <el-menu-item index="4-7">构件选中</el-menu-item>
        <el-menu-item index="4-8">构件纹理</el-menu-item>
        <el-menu-item index="4-9">构件着色</el-menu-item>
        <el-menu-item index="4-10">构件变换</el-menu-item>
        <!-- <el-menu-item index="4-11">构件参数化</el-menu-item> -->
      </el-menu-item-group>
    </el-sub-menu>

    <el-sub-menu index="5">
      <template #title>
        <el-icon><Platform /></el-icon>
        <span>模型操作</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="5-1">漫游</el-menu-item>
        <el-menu-item index="5-2">绕轴旋转</el-menu-item>
        <el-menu-item index="5-3">模型量测</el-menu-item>
        <el-menu-item index="5-4">设置选择方式</el-menu-item>
        <el-menu-item index="5-5">模型剖切</el-menu-item>
        <el-menu-item index="5-6">构件排布</el-menu-item>
        <!-- <el-menu-item index="5-7">模型渲染方式</el-menu-item> -->
        <!-- <el-menu-item index="5-8">矢量绘制</el-menu-item> -->
        <el-menu-item index="5-9">模型旋转范围角度</el-menu-item>
        <el-menu-item index="5-10">设置旋转交点样式</el-menu-item>
        <el-menu-item index="5-11">操作设置</el-menu-item>
        <el-menu-item index="5-12">模型爆炸</el-menu-item>
        <el-menu-item index="5-13">剖切盒</el-menu-item>
        <el-menu-item index="5-14">仿真动画</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="6">
      <template #title>
        <el-icon><Promotion /></el-icon>
        <span>监听事件</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="6-1">场景监听</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="7">
      <template #title>
        <el-icon><Histogram /></el-icon>
        <span>模型效果</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="7-1">阴影效果</el-menu-item>
        <el-menu-item index="7-2">倒影效果</el-menu-item>
        <el-menu-item index="7-3">模型闪烁</el-menu-item>
        <el-menu-item index="7-4">热力图渲染</el-menu-item>
        <el-menu-item index="7-5">模型渲染方式</el-menu-item>
        <el-menu-item index="7-6">灯光效果</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="8">
      <template #title>
        <el-icon><Edit /></el-icon>
        <span>标签/批注</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="8-1">模型批注</el-menu-item>
        <el-menu-item index="8-2">点标注</el-menu-item>
        <el-menu-item index="8-3">线标注</el-menu-item>
        <el-menu-item index="8-4">面标注</el-menu-item>
        <el-menu-item index="8-5">箭头标注</el-menu-item>
        <el-menu-item index="8-6">文本标注</el-menu-item>
        <!-- <el-menu-item index="8-7">图文标签</el-menu-item> -->
        <el-menu-item index="8-8">图标标签</el-menu-item>
        <el-menu-item index="8-9">自定义标签示例</el-menu-item>
        <el-menu-item index="8-10">三维标签</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="9">
      <template #title>
        <el-icon><SwitchFilled /></el-icon>
        <span>矢量图纸</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="9-1">二三维联动</el-menu-item>
        <el-menu-item index="9-2">二三维叠加</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
  <keep-alive>
    <router-view class="model-view" v-if="$route.meta.keepAlive"/>
  </keep-alive>
</div>
</template>

<script setup>
  import { getCurrentInstance, onMounted, ref, watch } from 'vue'
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    Fold,
    Expand,
    Tools,
    CameraFilled,
    Platform,
    Promotion,
    Histogram,
    Edit,
    SwitchFilled
  } from '@element-plus/icons-vue'
  const { proxy } = getCurrentInstance();
  const isCollapse = ref(false)
  let activeMenu = ref('')
  const handleSelect = (key, keyPath) => {  
    proxy.$router.push(`/demo:${key}`);
  }
  onMounted(() => {
    let hashPath = window.location.hash
    activeMenu.value = hashPath.substr(hashPath.indexOf(":") + 1, hashPath.length);
  })
  const handleMenu = (state) => {
    isCollapse.value = state
  }
</script>

<style lang="scss" scoped>
.demo-container {
  height: 100%;
  display: flex;
  .demo-menu {
    // height: calc(100vh - 56px);
    height: 100vh;
    border-right: 1px solid rgba($color: #757474, $alpha: .5);
    overflow: auto;
    overflow-x:hidden;
    &::-webkit-scrollbar {
        width: 6px;    
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #757474;
    }
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: #2d2f30;
    }
    :deep(.el-menu-item.is-active) {
      background: linear-gradient(to right, #45a3ff, #0000);
    }
    &:not(.el-menu--collapse) {
      width: 240px;
    }
    .isCollapse {
      cursor: pointer;
      width: 100%;
      padding: 6px 0;
    }
  }
  .model-view {
    height: 100%;
    width: 100%;
  }
}
</style>